<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link
            rel="stylesheet"
            href="//unpkg.com/layui@2.6.8/dist/css/layui.css"
        />

        <!-- 引入 layui.js -->
        <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    </head>
    <style>
        body {
            padding-left: 50px;
        }
    </style>
    <body>
        <table
            id="userlist"
            style="margin: auto; margin-top: 100px"
            lay-filter="userlist"
        ></table>
    </body>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
            >删除</a
        >
    </script>
    <script>
        layui.use('table', function () {
            var table = layui.table
            //第一个实例
            table.render({
                elem: '#userlist',
                width: 1000,
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('token'),
                },
                url: 'https://api.zzgoodqc.cn/api/user', //数据接口
                page: true, //开启分页
                limit: 10,
                limits: [15, 30, 50, 100],
                cols: [
                    [
                        //表头
                        {
                            field: 'id',
                            title: 'ID',

                            sort: true,
                            fixed: 'left',
                        },
                        { field: 'img', title: '头像' },
                        { field: 'username', title: '用户名' },
                        { field: 'sex', title: '性别', sort: true },
                        { field: 'detail_address', title: '地址' },
                        { field: 'created_at', title: '创建时间' },
                        { field: 'updated_at', title: '更新时间' },
                        {
                            fixed: 'right',
                            title: '操作',
                            width: 150,
                            align: 'center',
                            toolbar: '#barDemo',
                        },
                    ],
                ],
                parseData: function (res) {
                    return {
                        code: 0,
                        msg: res.msg,
                        count: res.count,
                        data: res.data,
                    }
                },
            })

            table.on('tool(userlist)', function (obj) {
                //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                var layEvent = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr //获得当前行 tr 的 DOM 对象（如果有的话）
                console.log(44444444444)
                if (layEvent === 'detail') {
                    //查看
                    //do somehing
                } else if (layEvent === 'del') {
                    //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del() //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index)
                        //向服务端发送删除指令
                    })
                } else if (layEvent === 'edit') {
                    //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123',
                        title: 'xxx',
                    })
                } else if (layEvent === 'LAYTABLE_TIPS') {
                    layer.alert('Hi，头部工具栏扩展的右侧图标。')
                }
            })
        })
    </script>
</html>
